<!--
 * @Author: wanlixin
 * @Date: 2019-10-05 10:41:31
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-10-29 21:19:56
 * @Description: 开发面板首页
 -->
<template>
  <li
    class="grimm-index-list-item"
    :class="itemClass"
    @touchstart="addActiveCls"
    @touchend="removeActiveCls"
    @click="selectItem()"
  >
    <slot>
      <div class="grimm-index-list-item-def border-bottom-1px">{{item.name}}</div>
    </slot>
  </li>
</template>

<script type="text/ecmascript-6">
import { addClass, removeClass } from '../../common/helpers/dom';

const COMPONENT_NAME = 'grimm-index-list-item';
const ACTIVE_CLS = 'grimm-index-list-item_active';
const EVENT_SELECT = 'select';

export default {
  name: COMPONENT_NAME,
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    itemClass() {
      return this.item.active ? ACTIVE_CLS : '';
    },
  },
  methods: {
    addActiveCls(e) {
      addClass(e.currentTarget, ACTIVE_CLS);
    },
    removeActiveCls(e) {
      removeClass(e.currentTarget, ACTIVE_CLS);
    },
    selectItem() {
      this.$emit(EVENT_SELECT, this.item);
    },
  },
};
</script>

<style lang="stylus" >
@import '../../common/stylus/variable.styl';
@import '../../common/stylus/mixin.styl';

.grimm-index-list-item-def {
  position: relative;
  height: 50px;
  line-height: 50px;
  padding: 0 16px;
  // font-size: $fontsize-medium;
  // color: $index-list-item-color;
}

.grimm-index-list-item_active {
  // background: $index-list-item-active-bgc;
}
</style>
